<template>
  <div class="economic-container">
    <el-card class="economic-box">
      <!-- 头部 -->
      <pageTools>
        <template #before>
          <el-button type="primary" size="small" @click="addData">添加经纪</el-button>
        </template>
        <template #after>
          <el-input v-model="search" clearable placeholder="请输入关键字" @clear="getEconomicList">
            <el-button slot="append" icon="el-icon-search" @click="searchFn" />
          </el-input>
        </template>
      </pageTools>

      <el-divider />
      <!-- 内容 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="image" label="图片" width="250px" align="center">
          <template v-slot="{row}">
            <img v-errImg="require('@/assets/common/defaultImg.png')" style="width:200px" :src="row.image" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" align="center" />
        <el-table-column prop="email" label="邮箱" align="center" />
        <el-table-column prop="phone" label="电话" align="center" />
        <el-table-column prop="address" label="地址" align="center" />
        <el-table-column prop="desc" label="介绍" align="center" />
        <el-table-column label="操作" align="center">
          <template v-slot="{row}">
            <el-button type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="center" class="pagination-box">

        <el-pagination
          :page-size="pagesize"
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <!-- 弹窗 -->
    <updateDialog ref="editEvent" :dialog-visible.sync="dialogVisible" @updateEvent="getEconomicList" />
  </div>
</template>

<script>
import { economicList, agentsCount, delAgents } from '@/api/economic'
import updateDialog from './component/dialog.vue'
export default {
  components: { updateDialog },
  data() {
    return {
      dialogVisible: false,
      // 总数
      total: 0,
      page: 0, // 页码
      pagesize: 2, // 每页条数
      tableData: [],
      search: ''
    }
  },
  created() {
    this.getEconomicList()
  },
  methods: {
    // 获取经纪人列表
    async getEconomicList() {
      if (this.search) {
        const res = await economicList({
          _limit: this.pagesize,
          _start: this.page,
          name_contains: this.search
        })
        this.tableData = res
        // 获取经纪人总数量
        const result = await agentsCount({
          _limit: this.pagesize,
          _start: this.page,
          name_contains: this.search
        })
        this.total = result
      } else {
        const res = await economicList({
          _limit: this.pagesize,
          _start: this.page
        })
        this.tableData = res
        // 获取经纪人总数量
        const result = await agentsCount({
          _limit: this.pagesize,
          _start: this.page
        })
        this.total = result
      }
    },
    // 添加经纪
    addData() {
      this.dialogVisible = true
    },
    // 改变页数
    handleCurrentChange(val) {
      this.page = (val - 1) * 2
      this.getEconomicList()
    },
    // 删除经纪
    delFn(id) {
      this.$confirm('此操作将永久删除该经纪, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.$message.success('删除成功!')
        await delAgents(id)
        // 删除到最后一页的最后一条数据出现 页面没有数据
        if (this.tableData.length === 1 && this.page !== 1) {
          this.page--
        }
        this.getEconomicList()
      }).catch(() => {
        this.$message.info('取消删除!')
      })
    },
    // 编辑经纪 -数据回显
    async editFn(id) {
      this.dialogVisible = true
      this.$refs.editEvent.getPerAgent(id)
    },
    // 查询经纪
    async  searchFn() {
      this.getEconomicList()
    }
  }
}
</script>

<style lang='scss' scoped>
.economic-container{
  padding: 20px;
  .pagination-box{
    margin-top: 10px;
  }
}
</style>
